<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
        .box {
            min-height: 300px;
            background-color: orange;
            color: #fff;
            font-size: 30px;
        }

        .v-enter {
            transform: translateX(-900px);
            opacity: 0;
        }

        .v-enter-active,
        .v-leave-active {
            transition: all 1s linear;
        }

        .v-enter-to,
        .v-leave {
            transform: translateX(0);
            opacity: 1;
        }

        .v-leave-to {
            transform: translateX(900px);
            opacity: 0;
        }
    </style>
</head>

<body>
    <div id="app">
        <!-- 如果 keep-alive中缓存的组件 在内部调用了$destroy销毁自身，被销毁的组件会失去缓存的效果-->
        <transition mode="out-in">
            <!-- <keep-alive include="ComponentA,ComponentB"> -->
            <!-- <keep-alive :include="/^Component/"> -->
            <!-- <keep-alive :include="['ComponentA']"> -->
            <keep-alive :include="cacheArr">
                <component :is="componentName" @destroy="onDestroy"></component>
            </keep-alive>
        </transition>

        <button @click="flag=!flag">切换</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
    <script>
        const randomComponent = (name) => ({
            name,
            template: `<div class="box" :style="{backgroundColor: color}">
            <p>组件:{{name}}</p> <p>计数{{count}}</p>
            <button @click="count++">计数++</button>
            <button @click="$destroy()">销毁组件{{name}}</button>
            <button @click="$emit('destroy', name)">销毁组件{{name}}2</button>
          </div>`,
            data() {
                const getRandomColor = () =>
                    `rgb(${~~(Math.random() * 255)}, ${~~(Math.random() * 255)}, ${~~(
              Math.random() * 255
            )})`;
                return {
                    name,
                    count: 0,
                    color: getRandomColor(),
                };
            },
            created() {
                console.log(this.name + "被创建");
            },
            beforeDestroy() {
                console.log(this.name + "被销毁");
            },
            activated() {
                console.log(this.name + '活动了');
            },
            deactivated() {
                console.log(this.name + '失活了');
            }
        });

        Vue.component("ComponentA", randomComponent("ComponentA"));

        Vue.component("ComponentB", randomComponent("ComponentB"));

        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                cacheArr: ['ComponentA', 'ComponentB']
            },
            computed: {
                componentName() {
                    return this.flag ? "ComponentA" : "ComponentB";
                },
            },
            methods: {
                onDestroy(event) {
                    const index = this.cacheArr.findIndex(item => item === event)
                    this.cacheArr.splice(index, 1)
                }
            }
        });
    </script>
</body>

</html>